<template>
  <div class="order">
    <!-- 导航栏 -->
    <van-nav-bar
      title="结算"
      left-arrow
      @click-left="onClickLeft"
      style="margin-bottom:6px"
    />

    <!-- 联系人 -->
    <van-contact-card type="add" @click="onAdd" />
    <!-- 支付方式 -->
    <div class="pay">
      <div class="list">
        <i class="fa fa-wechat" style="color:#59C362"></i>
        <span>微信支付</span>
        <input type="radio" name="" id="" />
      </div>
      <div class="list">
        <i class="fa fa-wechat" style="color:#59C362"></i>
        <span>支付宝</span>
        <input type="radio" name="" id="" />
      </div>
      <div class="list">
        <i class="fa fa-wechat" style="color:#59C362"></i>
        <span>小米钱包</span>
        <input type="radio" name="" id="" />
      </div>
      <div class="list">
        <i class="fa fa-wechat" style="color:#59C362"></i>
        <span>银联在线支付</span>
        <input type="radio" name="" id="" />
      </div>
      <div class="list">
        <i class="fa fa-wechat" style="color:#59C362"></i>
        <span>翼支付</span>
        <input type="radio" name="" id="" />
      </div>
    </div>
    <p class="tit">*查看支付活动规则</p>
    <!--  -->
    <van-cell title="快速配送（免运费）" is-link />
    <van-cell title="电子发票" is-link />
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
    <!-- 要购买商品 -->
    <div class="buy-shop">
      <!-- 商品卡片 -->
      <!-- <van-card
        v-for="(item, index) in orderSingleItemDetails"
        :key="index"
        :num="item.quantity"
        :price="item.price"
        :title="item.product.name"
        :thumb="item.product.coverImg"
      />-->
    </div>
    <!-- 底部 -->
    <div class="box">
      <p class="left">应付金额：</p>
      <span class="right">去付款</span>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";

const coupon = {
  available: 1,
  condition: "无使用门槛\n最多优惠12元",
  reason: "",
  value: 150,
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "1.5",
  unitDesc: "元",
};
export default {
  data() {
    return {
      radio: "1",
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onAdd() {
      Toast("新增");
      this.$router.push("/addressEdit");
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      console.log(code);
      this.coupons.push(coupon);
    },
  },
};
</script>

<style>
.pay .list {
  width: 100%;
  height: 46px;
  border-bottom: 1px solid rgb(216, 215, 215);
}
.pay .list .fa {
  text-align: center;
  line-height: 46px;
  margin: 0 8px;
}
.pay .list span {
  margin-left: 4px;
}
.pay .list input {
  float: right;
  margin-right: 15px;
  /* line-height: 40px; */
  margin-top: 16px;
}
.tit {
  margin: 20px 0;
  float: right;
  margin-right: 10px;
}
.box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 50px;
  /* border: 1px solid red; */
}
.box .left {
  width: 60%;
  height: 50px;
  line-height: 50px;
  padding-left: 8px;
  font-size: 16px;
  float: left;
  color: #fd6528;
  /* border: 1px solid blue; */
}
.box .right {
  display: block;
  width: 36%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  float: right;
  background-color: #fd6528;
  color: white;
  text-align: center;
}
</style>
